<template>
  <div class="page">
    <!-- box -->
    <div class="testBox2" style="margin-top:10px">
       <h1>未报名培训班处理</h1>
       <div class="tmContent">
         <span class="tit1"> 班级名称：</span> {{data.title}}
         <table class="bmtable">
              <tr>
                <th>班级类型：</th>
                <td>{{data.type}}</td>
                <th>班级代码：</th>
                <td>{{data.code}}</td>
              </tr>
              <tr>
                <th>培训地点：</th>
                <td>{{data.place}}</td>
                <th>开始时间：</th>
                <td>{{data.start}}</td>
              </tr>
              <tr>
                <th>结束时间：</th>
                <td>{{data.end}}</td>
                <th>报名期限：</th>
                <td>{{data.deadline}}</td>
              </tr>
              <tr>
                <th>考勤天数：</th>
                <td>{{data.days}}</td>
                <th>备注信息：</th>
                <td>{{data.note}}</td>
              </tr>
              <tr>
                <th>培训通知：</th>
                <td><a :href="data.attf">下载通知</a></td>
              </tr>
            </table>
       </div>
       <h2>操作</h2>
       <div class="tmContent">
            <table class="bmtable" style="border:0">
              <tr>
                <th><em>*</em>处理方式：</th>
                <td><select class="bmtableSelect" v-model="select"><option value="1">报名</option><option value="2">取消报名</option><option value="3">请假</option></select></td>
              </tr>
               <tr v-if="select==1"> 
                <th>说明：</th>
                <td><input v-model="descr" type="text" class="bmtableSelect" maxlength="15"></td>
              </tr>
               <tr v-if="select==1"> 
                <th>性别：</th>
                <td><select class="bmtableSelect" v-model="sex"><option value="男">男</option><option value="女">女</option></select></td>
              </tr>
              <tr v-if="select==1"> 
                <th><em>*</em>联系电话：</th>
                <td><input type="text" class="bmtableSelect" maxlength="15" v-model="mobile"></td>
              </tr>
              <tr v-if="select==1&&data.choose_hotel=='1'"> 
                <th>酒店：</th>
                <td><select class="bmtableSelect" v-model="hotel"><option value="协议酒店">协议酒店</option><option value="不入住">不入住</option></select></td>
              </tr>
              <tr v-if="select==1&&hotel=='协议酒店'&&data.choose_hotel=='1'"> 
                <th>房型：</th>
                <td><select class="bmtableSelect" v-model="layout"><option value="大床房">大床房</option><option value="标准">标准</option></select></td>
              </tr>
              <tr v-if="select==1&&hotel=='协议酒店'&&data.choose_hotel=='1'"> 
                <th><em>*</em>入住日期：</th>
                <td><input id="arrived_at" type="text" class="bmtableSelect" v-model="arrived_at" readonly="" @click="dateShowF"></td>
              </tr>
              <tr v-if="select==1&&hotel=='协议酒店'&&data.choose_hotel=='1'"> 
                <th><em>*</em>退房日期</th>
                <td><input id="left_at1" type="text" class="bmtableSelect" maxlength="15" v-model="left_at" readonly='' @click="TdateShowF"></td>
              </tr>
            </table>
            <!-- 入住日期 -->
            <van-actionsheet v-model="dateShow">
              <van-datetime-picker v-model="currentDate" title="选择入住日期" type="date" :min-date="minDate" @confirm="dateValF" @cancel="dateHideF" />
            </van-actionsheet>
            <!-- 退房日期 -->
            <van-actionsheet v-model="TdateShow">
              <van-datetime-picker v-model="TcurrentDate" title="选择退房日期" type="date" :min-date="currentDate" @confirm="TdateValF" @cancel="TdateHideF" />
            </van-actionsheet>
       </div>
    </div>
    <!-- msg -->
    
    <!-- btn -->
    <div class="btnBox" style="margin-bottom:20px">
      <a class="a2" @click="post">确定</a>
    </div>
  </div>
</template>


<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      dateShow: false,
      TdateShow: false,
      currentDate: new Date(),
      TcurrentDate: new Date(),
      minDate: new Date(),
      select:1,
      descr:"",
      mobile:"",
      sex:'男',
      hotel:"协议酒店",
      layout:"大床房",
      arrived_at:"",
      left_at:"",
      data:[]
    };
  },
  mounted: function() {
    maxusJSB.tojson({title:"培训班报名处理",left:"关闭"})
    this.id=this.$route.query.id
    this.getData();
  },
  methods: {
    // 请求列表
    getData() {
      this.$http
        .get("?key=&request=front&operation=single-project&client=1&by=admin&id="+this.$route.query.id+"&user_id="+this.getUserID+"&_="+Date.parse(new Date()))
        .then(response => {
          if(response.ret==1){
            this.data=response.data[0]
            response.data[0].hotel!=null?this.hotel=response.data[0].hotel:''
            response.data[0].layout!=null?this.layout=response.data[0].layout:''
            response.data[0].left_at!=null?this.left_at=response.data[0].left_at:''
            response.data[0].mobile!=null?this.mobile=response.data[0].mobile:''
            response.data[0].sex!=null?this.sex=response.data[0].sex:''
            response.data[0].arrived_at!=null?this.arrived_at=response.data[0].arrived_at:''
            response.data[0].descr!=null?this.descr=response.data[0].descr:''
          }
        });
    },
    post(){ 
      if(this.select==1){// 报名
      if(this.mobile==""){
          Toast.fail('联系电话不能为空');
          return false
        }
        var aa=""
        if(this.hotel=='协议酒店'&&this.data.choose_hotel=='1'){
          if(this.arrived_at==''||this.left_at==''){
            Toast.fail('入住或退房日期不能为空');
            return false
          }else{
            aa="&layout="+this.layout+"&arrived_at="+this.arrived_at+"&left_at="+this.left_at
          }
        }
        this.$http
        .get("?key=&request=front&operation=apply&client=1&by=admin&class_id="+this.$route.query.id+"&user_id="+this.getUserID+"&descr="+this.descr+"&mobile="+this.mobile+"&sex="+this.sex+"&hotel="+this.hotel+aa+"&_="+Date.parse(new Date()))
        .then(response => {
          if(response.ret==1){
            Toast.success('报名成功');
          }
        });
      }else if(this.select==2){//取消报名
        this.$http
        .get("?key=&request=front&operation=cancel-apply&client=1&by=admin&class_id="+this.$route.query.id+"&user_id="+this.getUserID+"&_="+Date.parse(new Date()))
        .then(response => {
          if(response.ret==1){
            Toast.success('取消报名成功');
          }
        });
      }else if(this.select==3){//请假
        this.$http
        .get("?key=&request=front&operation=leave&client=1&by=admin&class_id="+this.$route.query.id+"&user_id="+this.getUserID+"&_="+Date.parse(new Date()))
        .then(response => {
          if(response.ret==1){
            Toast.success('请假成功');
          }
        });
      }
    },
    // 入住日期
    dateShowF() {
      this.dateShow = true;
    },
    dateHideF() {
      this.dateShow = false;
    },
    dateValF(value) {
      this.arrived_at=this.formatDateTime(value)
      this.dateShow = false;
    },
    // 退房日期
    TdateShowF() {
      this.TdateShow = true;
    },
    TdateHideF() {
      this.TdateShow = false;
    },
    TdateValF(value) {
      console.log(this.formatDateTime(value));
      
      this.left_at=this.formatDateTime(value)
      this.TdateShow = false;
    },
    formatDateTime(obj,v) {
      var date =  new Date(obj);
      var y = 1900+date.getYear();
      var m = "0"+(date.getMonth()+1);
      var d = "0"+date.getDate();
      var minute = date.getMinutes();  
      var hours = date.getHours();  
      minute = minute < 10 ? ('0' + minute) : minute;    
      hours = hours < 10 ? ('0' + hours) : hours;
      if(v=="time"){
      return hours+':'+minute;   
      }else{
      return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length);
      }
    }
  }
};

</script>

<style>
/**
 * LCalendar移动端日期时间选择控件
 * 
 * version:1.7.1
 * 
 * author:黄磊
 * 
 * git:https://github.com/xfhxbb/LCalendar
 * 
 * Copyright 2016
 * 
 * Licensed under MIT
 * 
 * 最近修改于： 2016-6-12 17:22:20
 */
.gearDate {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9900;
    overflow: hidden;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both
}

.date_ctrl {
    vertical-align: middle;
    background-color: #d5d8df;
    color: #000;
    margin: 0;
    height: auto;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9901;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
}

.slideInUp {
    -webkit-animation: slideInUp .3s;
            animation: slideInUp .3s;
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
    }
}

.ym_roll,
.date_roll,
.datetime_roll,
.time_roll {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: transparent;
    -webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#debb47), to(rgba(36, 142, 36, 0)));
    -webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0))
}

.ym_roll>div,
.date_roll>div,
.datetime_roll>div,
.time_roll>div {
    font-size: 2.3em;
    height: 10em;
    float: left;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    -webkit-box-flex: 4;
    -webkit-flex: 4;
        -ms-flex: 4;
            flex: 4
}

.ym_roll>div .gear,
.date_roll>div .gear,
.datetime_roll>div .gear,
.time_roll>div .gear {
    width: 100%;
    float: left;
    position: absolute;
    z-index: 9902;
    margin-top: -4em
}

.date_roll_mask {
    -webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(#debb47), to(rgba(36, 142, 36, 0)));
    -webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0));
    padding: 0
}

.date_roll>div:nth-child(2) {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
        -ms-flex: 2;
            flex: 2
}

.date_roll>div:nth-child(1),
.datetime_roll>div:nth-child(1) {
    -webkit-box-flex: 4;
    -webkit-flex: 4;
        -ms-flex: 4;
            flex: 4
}

.datetime_roll>div:first-child {
    -webkit-box-flex: 6;
    -webkit-flex: 6;
        -ms-flex: 6;
            flex: 6
}

.datetime_roll>div:last-child {
    -webkit-box-flex: 6;
    -webkit-flex: 6;
        -ms-flex: 6;
            flex: 6
}

.date_grid {
    position: relative;
    top: 4em;
    width: 100%;
    height: 2em;
    margin: 0;
    box-sizing: border-box;
    z-index: 0;
    border-top: 1px solid #abaeb5;
    border-bottom: 1px solid #abaeb5
}

.date_grid>div {
    color: #000;
    position: absolute;
    right: 0;
    top: 0;
    font-size: .8em;
    line-height: 2.5em
}

.date_roll>div:nth-child(3) .date_grid>div {
    left: 42%
}

.datetime_roll>div .date_grid>div {
    right: 0
}

.datetime_roll>div:first-child .date_grid>div {
    left: auto;
    right: 0%
}

.datetime_roll>div:last-child .date_grid>div {
    left: 50%
}

.time_roll>div:nth-child(1) .date_grid>div {
    right: 1em
}

.ym_roll>div:nth-child(1) .date_grid>div {
    right: .1em
}

.ym_roll>div .date_grid>div,
.time_roll>div .date_grid>div {
    right: 5em
}

.date_btn {
    color: #0575f2;
    font-size: 1.6em;
    line-height: 1em;
    text-align: center;
    padding: .8em 1em
}

.date_btn_box:before,
.date_btn_box:after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    display: block;
    background-color: #96979b;
    z-index: 15;
    -webkit-transform: scaleY(0.33);
            transform: scaleY(0.33)
}

.date_btn_box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    background-color: #f1f2f4;
    position: relative
}

.date_btn_box:before {
    left: 0;
    top: 0;
    -webkit-transform-origin: 50% 20%;
            transform-origin: 50% 20%
}

.date_btn_box:after {
    left: 0;
    bottom: 0;
    -webkit-transform-origin: 50% 70%;
            transform-origin: 50% 70%
}

.date_roll>div:nth-child(1) .gear {
    text-indent: 20%
}

.date_roll>div:nth-child(2) .gear {
    text-indent: -20%
}

.date_roll>div:nth-child(3) .gear {
    text-indent: -55%
}

.datetime_roll>div .gear {
    width: 100%;
    text-indent: -25%
}

.datetime_roll>div:first-child .gear {
    text-indent: -10%
}

.datetime_roll>div:last-child .gear {
    text-indent: -50%
}

.ym_roll>div .gear,
.time_roll>div .gear {
    width: 100%;
    text-indent: -70%
}

.ym_roll>div:nth-child(1) .gear,
.time_roll>div:nth-child(1) .gear {
    width: 100%;
    text-indent: 10%
}

.tooth {
    height: 2em;
    line-height: 2em;
    text-align: center
}
</style>